<template>
  <!-- 顶部内容, 书写在这里, 通过传送门(teleporter) 放在顶部内 -->
  <teleport to=".header">
    <SdyHeader center="search" />
  </teleport>

  <div class="sdy-cate">
    <ul class="slide">
      <li
        v-for="(item, index) in cateList"
        :key="item"
        :class="{ active: index === currentCate }"
        @click="currentCate = index">{{ item }}</li>
    </ul>
    <ul class="container">
      <li
        v-for="item in goodsList"
        :key="item.cate">
        <div class="top">{{ item.brand }}</div>
        <div class="content">
          <p @click="$myRouter.push({ path: '/list', query: { keyword: goods.brand } })" v-for="goods in item.list" :key="goods.proid">
            <img :src="goods.img1" alt="">
            <span>￥ {{ goods.originprice.toFixed(2) }}</span>
          </p>
        </div>
      </li>
    </ul>
  </div>
</template>

<script name="sdyCate" lang="ts" setup>
import SdyHeader from '../../components/header.vue'
import { ref, onMounted, watch } from 'vue'
import { getCateList, getBrandList, getGoodsForCateAndBrand } from '../../model/goods'
import { useRouter } from 'vue-router'
const $myRouter = useRouter()

// 书写接口
interface GoodsInfo {
  proid: string
  img1: string
  originprice: number
  [key: string]: any
}

interface GoodsList {
  cate: string
  brand: string,
  list: Array<GoodsInfo>
}

// 准备一个变量, 表示分类目录列表
const cateList = ref<string[]>([])

// 准备一个变量, 表示当前选中的分类
const currentCate = ref<number>(0)

// 获取分类列表
const getCateListHandler = async () => {
  const res = await getCateList()
  if ((res as unknown as any).code !== '200') return
  cateList.value = res.data.map((item: string) => item.trim())
}

// 准备一个变量, 表示品牌列表
const brandList = ref<{ brand: string }[]>([])

// 准备一个变量, 保存商品数据
const goodsList = ref<Array<GoodsList>>([])

// 请求对应品牌的对应商品
const getGoodsList = async () => {
  goodsList.value = []
  // 遍历品牌列表
  brandList.value.forEach(async item => {
    const res = await getGoodsForCateAndBrand(cateList.value[currentCate.value], item.brand)
    // 给 goodsList 内的内容赋值
    if ((res as any).code !== '200') return
    goodsList.value.push({
      cate: cateList.value[currentCate.value],
      brand: item.brand,
      list: res.data
    })
  })
}

// 监控 currentCate 变换
watch(currentCate, async (newVal) => {
  // 拿到对应的分类
  const cate: string = cateList.value[newVal]

  // 发送请求, 请求品牌列表
  const res = await getBrandList(cate || '手机')
  if ((res as any).code !== '200') return
  brandList.value = res.data

  // 加一个定时器(让他去到下一个任务队列)
  setTimeout(() => {
    // 请求对应品牌的对应商品
    getGoodsList()
  }, 10)
}, {
  immediate: true
})

onMounted(() => {
  getCateListHandler()
})

</script>

<style scoped lang="scss">
.sdy-cate {
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;

  > .slide {
    width: 80px;
    overflow: auto;

    > li {
      background-color: #F6F6F6;
      width: 100%;
      height: 40px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 14px;
      transition: all .3s linear;

      &.active {
        background-color: #fff;
        color: red;
      }
    }
  }

  > .container {
    flex: 1;
    overflow: auto;
    box-sizing: border-box;
    padding: 5px;

    > li {
      margin-bottom: 30px;

      > .top {
        height: 30px;
        font-weight: 700;
      }

      > .content {
        display: block;
        padding: 0 10px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;

        > p {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;

          > img {
            width: 60px;
            height: 60px;
            margin-bottom: 10px;
            display: block;
          }

          > span {
            color: red;
          }
        }
      }
    }
  }
}
</style>
